<template>
  <div class="mb60">
    <van-nav-bar left-arrow @click-left="$router.back()" fixed title="购物车" />
    <!-- 商品列表 -->
    <div class="cart-list">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div class="cart-item" v-for="(item) in cartList" :key="item.id">

          <van-swipe-cell>
            <van-card :price="item.price" :desc="item.attrs" :title="item.goodsname" class="goods-card"
              :thumb="$baseUrl + item.img">
              <template #thumb>
                <van-checkbox style="float:left" shape="round" checked-color="red" v-model="item.status"
                  @change="cartUpdate(item)" />
                <br />
                <img @click="goGoodsDetail(item.id)" v-lazy="$baseUrl + item.img"
                  style="height: 80px;width:80px;margin-top: 10px;" />
              </template>
              <template v-slot:footer>
                <van-stepper v-model="item.num" @change="cartUpdate(item)" />
              </template>
            </van-card>
            <template #right>
              <van-button @click="del(item.id)" square text="删除" type="danger" class="delete-button" />
              <van-button @click="goGoodsDetail(item.goodsid)" square text="查看" type="info" class="delete-button" />
            </template>
          </van-swipe-cell>
        </div>
      </van-pull-refresh>
    </div>
    <van-empty v-if="cartList.length === 0" description="暂无购物车数据" />

    <!-- 购物车信息 -->
    <van-submit-bar :price="cartPrice" button-text="提交订单" tip-icon="info-o" @submit="() => { }">
      <van-checkbox checked-color="red" v-model="allChecked">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>
  
<script>
import { mapActions, mapState, mapMutations, mapGetters } from 'vuex';
export default {
  computed: {
    ...mapState('cart', ['cartList']),
    ...mapGetters('cart', ['cartPrice', 'originAllChecked']),
    allChecked: {
      get: function () {
        return this.originAllChecked;
      },
      set(value) {
        // 更新全选复选框的状态
        this.updateAllChecked(value);
      }
    }
  },
  data() {
    return {
      isLoading: false
    }
  },
  mounted() {
    this.getCartList();
  },
  methods: {
    ...mapMutations('cart', ['cartAdd', 'updateAllChecked', 'updateStore']),
    ...mapActions('cart', ['getCartList', 'updateAllChecked', 'cartDelAction']),
    onRefresh() {
      const that = this;
      // 重新请求当前页面数据
      this.getCartList(() => {
        // 关闭下拉刷新loading效果
        that.isLoading = false;
      });
    },
    // 更新商品状态和数量
    cartUpdate({ id, num, status }) {
      // true=>1, false=>0
      status = status ? 1 : 0
      this.$axios.post('/cartedit', { id, num, status }).then(res => {
        if (res.code === 200) {
          this.$toast(res.msg);
        }
      });
    },
    // 查看商品详情
    goGoodsDetail(id) {
      this.$router.push({
        name: 'goods', query: {
          id
        }
      });
    },
    // 删除购物车商品
    del(id) {
      this.$dialog.confirm({
        title: '提示',
        message: '确认删除?',
        theme: 'round-button',
      })
        .then(() => {
          this.cartDelAction(id);
        })
        .catch(() => { });
    }
  }
}
</script>
  
<style scoped>
.van-card {
  background-color: #fff;
}

.van-checkbox {
  margin: 0 10px;
}

.delete-button {
  height: 100%;
}

.cart-list {
  margin-top: 48px;
  margin-bottom: 120px;
}

.van-submit-bar {
  bottom: 50px;
}
</style>